<template>
  <div class="screen-container">
    <header class="screen-header">
      <span class="title">湖南历史人物详细信息</span>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <!-- 历史人物基本信息 -->
          <Avatar :figureId="figureId" ref="Avatar"></Avatar>
        </div>
        <div id="left-bottom">
          <!-- 历史人物总结 -->
          <FigureSummary :figureId="figureId" ref="FigureSummary"></FigureSummary>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.MarkerMap ? 'fullscreen' : '']">
          <!-- 历史人物地图地点 marker -->
          <MarkerMap :mapKey="mapKey" :figureId="figureId" :locationId="locationId" ref="MarkerMap"></MarkerMap>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('MarkerMap')"
                  :class="['iconfont', fullScreenStatus.MarkerMap ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top">
          <!-- 历史人物视频播放-->
          <VideoPlay :figureId="figureId" ref="VideoPlay"></VideoPlay>
        </div>
      </section>

      <footer class="screen-foot">
        <div id="middle-bottom">
          <!-- 历史人物地点信息 -->
          <FigureLocation :figureId="figureId" v-on:getLocationId="getLocationId" ref="FigureLocation"></FigureLocation>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'
import FigureLocation from '@/components/FigureLocation'
import MarkerMap from '@/components/MarkerMap'
import FigureSummary from '@/components/FigureSummary'
import VideoPlay from '@/components/VideoPlay'

import indexdata from '@/api/data/indexdata'

export default {
  components: {
    Avatar,
    FigureLocation,
    MarkerMap,
    FigureSummary,
    VideoPlay
  },
  data () {
    return {
      // 定义每一个图表的全屏状态
      fullScreenStatus: {
        MarkerMap: false,
      },
      figureId: '',
      locationId:'',
      mapKey:0,
    }
  },
  created () {
    if (this.$route.params && this.$route.params.id) {
      this.figureId = this.$route.params.id
    }
  },
  methods: {
    changeSize (chartName) {
      // 1.改变fullScreenStatus的数据
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // 2.需要调用每一个图表组件的screenAdapter的方法
      if (chartName !== 'MarkerMap') {
        this.$refs[chartName].screenAdapter()
        this.$nextTick(() => {
          this.$refs[chartName].screenAdapter()
        })
      } else {
        this.$refs.MarkerMap.init()
      }
    },
    getLocationId(res){
      this.locationId = res
      this.mapKey = this.mapKey + 1
    }
  },
  computed: {},
  mounted () {
  },
  beforeDestroy () {
  }
}
</script>

<style scoped>
/*全屏样式的定义*/
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 1001;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 56px;
  font-size: 20px;
  position: relative;
}

.screen-foot {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 2px;
  z-index: 99;
}

.time-line {
  margin-top: 5px;
  height: 50px;
}

> div img {
  width: 100%;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%);
}

.title-right {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-80%);
}

.datetime {
  font-size: 15px;
  margin-left: 10px;
}

img {
  height: 35px;
  width: 128px;
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 5px;
}

.screen-left {
  height: 100%;
  width: 27.6%;
}

#left-top {
  height: 53%;
  position: relative;
}

#left-bottom {
  height: 35%;
  margin-top: 15px;
  position: relative;
}

.screen-middle {
  height: 56%;
  width: 41.5%;
  margin-left: 1.6%;
  margin-right: 1.6%;
}

#middle-top {
  width: 100%;
  height: 100%;
  position: relative;
}



.screen-right {
  height: 56%;
  width: 27.6%;
}

#right-top {
  height: 100%;
  position: relative;
}

#right-bottom {
  height: 38%;
  margin-top: 15px;
  position: relative;
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  color: #4e4949;
  z-index: 99;
  font-size: 25px;
}

.history-search {
  left: 10px;
  width: 15%;
  height: 64px;
}

.history-year {
  position: absolute;
  /*right: 40px;*/
  left: 15%;
  top: 10px;
  width: 100%;
  height: 64px;
}
.screen-foot{
  position: absolute;
  margin-left: 1.1%;
  margin-right: 1.1%;
  width: 69%;
  height: 35%;
  left: 27.6%;
  z-index: 99;
}
#middle-bottom {
  margin-top: 1.1%;
  margin-left: 1.1%;
  width: 100%;
  height: 90%;
  position: relative;
}

</style>
